<template>
    <div class="sidebar sidebar-default display-inline">
        <user-info :username="username" :avatar="avatar" :place="place"></user-info>
        <div class="side-header">HM</div>
        <ul class="list-group" id="list">
            <li v-for="list in menuList" :key="list.id" class="list-group-item">
                <list-item v-if="list.type === 'link'" :link="list.link" :text="list.text"
                           :icon="list.icon"></list-item>
                <list-item-collapse-header v-if="list.type === 'menu-group'" :link="list.link"
                                           :text="list.text" :target="list.id"
                                           :icon="list.icon"></list-item-collapse-header>
                <list-item-collapse-body v-if="list.type === 'menu-group'" :id="list.id"
                                         :links="list.group"></list-item-collapse-body>
            </li>
        </ul>
    </div>
</template>

<style>
    @import '../../sass/custom/_sidebar.scss';
</style>

<script>
    /* eslint-disable no-undef */
    import UserInfo from '../layout/UserInfo.vue';
    import ListItem from 'vue-fiu-ui/src/main/js/components/list/GroupItem.vue';
    import ListItemCollapseHeader from 'vue-fiu-ui/src/main/js/components/list/GroupItemCollapseHeader.vue';
    import ListItemCollapseBody from 'vue-fiu-ui/src/main/js/components/list/GroupItemCollapseBody.vue';

    export default {
        name: 'SideBar',
        data () {
            return {
                type: $(window).width < 992 ? 1 : 0,
                avatar: '#',
                username: 'User Name',
                place: 'User'
            };
        },
        props: {
            menuList: {type: Array, required: true}
        },
        methods: {
            resize () {
                let sideBar = $('.sidebar');
                if (sideBar.hasClass('activate')) {
                    return;
                }
                let sideMain = $('.side-main');
                let win = $(window);
                if (win.width() < 993 && this.type === 0) {
                    this.switchEl(sideBar, 1, 0);
                    sideMain.animate({paddingLeft: 0}, 500);
                } else if (win.width() >= 993 && this.type === 1) {
                    this.switchEl(sideBar, 0, 250);
                    sideMain.animate({paddingLeft: 250}, 500);
                }
            },
            filter (el, number) {
                el.css({filter: `blur(${number}px)`});
            },
            switchEl (el, type, width) {
                this.type = type;
                el.addClass('side-switch');
                el.animate({width: width}, 500);
                if (type === 0) {
                    el.show();
                }
                setTimeout(() => {
                    if (type === 1) {
                        el.hide();
                    }
                    el.removeClass('side-switch');
                }, 500);
            },
            collapse (el, status) {
                let id = $(el).attr('id');
                let icon = $(`[data-target="#${id}"] i`);
                if (status) {
                    icon.removeClass('fa-angle-left');
                    icon.addClass('fa-angle-down');
                } else {
                    icon.removeClass('fa-angle-down');
                    icon.addClass('fa-angle-left');
                }
            },
            activeUrl () {
                let list = $('.list-group a');
                if (list.length < 0) {
                    return;
                }
                let pathname = document.location.pathname;
                for (let i = 0; i < list.length; i++) {
                    let a = $(list[i]);
                    let href = a.attr('href');
                    if (href === pathname) {
                        let p = a.parent();
                        if (p.attr('data-type') === 'collapse-item') {
                            let f = p.parent();
                            p = $(`[data-target="#${f.attr('id')}" ]`);
                            p.click();
                            p.parent().addClass('activated');
                        } else {
                            p.addClass('activated');
                        }
                        break;
                    }
                }
            },
            liClick () {
                $('#list > li').click(function (e) {
                    e.stopPropagation();
                    $('#list > li').removeClass('click');
                    $(this).addClass('click');
                });
            }
        },
        components: {
            UserInfo,
            ListItem,
            ListItemCollapseHeader,
            ListItemCollapseBody
        },
        mounted () {
            this.resize();
            $(window).resize(() => {
                this.resize();
            });
            let collapse = $('.sidebar [data-group="collapse"]');
            let toggle = $('.sidebar [data-toggle="collapse"]');
            let vue = this;
            collapse.on('show.bs.collapse', function () {
                vue.collapse(this, true);
            });
            collapse.on('hide.bs.collapse', function () {
                vue.collapse(this, false);
            });
            toggle.on('click', function () {
                $('[data-group="collapse"]').collapse('hide');
                $($(this).attr('data-target')).collapse('show');
            });
            $(document).click(function () {
                if ($('.sidebar').width() <= 100) {
                    $('[data-group="collapse"]').collapse('hide');
                }
            });
            this.liClick();
            this.$nextTick(() => {
                this.activeUrl();
            });
            let user = JSON.parse(this.$storage.get(this.$key.USER_DATA));
            this.username = user.name;
            this.place = user.roles[0].display_name || 'User';
            this.avatar = '/api/file/image/' + user.user_profile.avatar;
        }
    };
</script>
